<!DOCTYPE html>












  


<html class="theme-next muse use-motion" lang="zh-CN">
<head><meta name="generator" content="Hexo 3.8.0">
  <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
<meta name="theme-color" content="#222">












<meta http-equiv="Cache-Control" content="no-transform">
<meta http-equiv="Cache-Control" content="no-siteapp">






















<link href="/lib/font-awesome/css/font-awesome.min.css?v=4.6.2" rel="stylesheet" type="text/css">

<link href="/css/main.css?v=6.3.0" rel="stylesheet" type="text/css">


  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png?v=6.3.0">


  <link rel="icon" type="image/png" sizes="32x32" href="/favicon.ico?v=6.3.0">


  <link rel="icon" type="image/png" sizes="16x16" href="/favicon.ico?v=6.3.0">


  <link rel="mask-icon" href="/images/logo.svg?v=6.3.0" color="#222">









<script type="text/javascript" id="hexo.configurations">
  var NexT = window.NexT || {};
  var CONFIG = {
    root: '/',
    scheme: 'Muse',
    version: '6.3.0',
    sidebar: {"position":"left","display":"post","offset":12,"b2t":false,"scrollpercent":false,"onmobile":false},
    fancybox: false,
    fastclick: false,
    lazyload: false,
    tabs: true,
    motion: {"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},
    algolia: {
      applicationID: '',
      apiKey: '',
      indexName: '',
      hits: {"per_page":10},
      labels: {"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}
    }
  };
</script>


  




  <meta name="description" content="该Blog始于购买了一个域名，本想租用VPS搭建网站，用来练手。思来想去却找不到一个适合的。后发现GitHub的Pages： You can put anything here you like.">
<meta name="keywords" content="GitHub,Hexo,Hexo-Theme-NexT,Blog">
<meta property="og:type" content="article">
<meta property="og:title" content="使用GitHub&amp;Hexo&amp;Next搭建个人博客">
<meta property="og:url" content="https://yamdestiny.xyz/2017/02/08/GitHub-Hexo-Next-Build-Personal-blog/index.html">
<meta property="og:site_name" content="Yamdestiny">
<meta property="og:description" content="该Blog始于购买了一个域名，本想租用VPS搭建网站，用来练手。思来想去却找不到一个适合的。后发现GitHub的Pages： You can put anything here you like.">
<meta property="og:locale" content="zh-CN">
<meta property="og:updated_time" content="2019-04-02T01:23:07.946Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="使用GitHub&amp;Hexo&amp;Next搭建个人博客">
<meta name="twitter:description" content="该Blog始于购买了一个域名，本想租用VPS搭建网站，用来练手。思来想去却找不到一个适合的。后发现GitHub的Pages： You can put anything here you like.">






  <link rel="canonical" href="https://yamdestiny.xyz/2017/02/08/GitHub-Hexo-Next-Build-Personal-blog/">



<script type="text/javascript" id="page.configurations">
  CONFIG.page = {
    sidebar: "",
  };
</script>

  <title>使用GitHub&Hexo&Next搭建个人博客 | Yamdestiny</title>
  




<script async src="https://www.googletagmanager.com/gtag/js?id=UA-92396016-1"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-92396016-1');
</script>



  <script type="text/javascript">
    var _hmt = _hmt || [];
    (function() {
      var hm = document.createElement("script");
      hm.src = "https://hm.baidu.com/hm.js?4eacbd1e85d8eebe356b663a83063d78";
      var s = document.getElementsByTagName("script")[0];
      s.parentNode.insertBefore(hm, s);
    })();
  </script>




  <noscript>
  <style type="text/css">
    .use-motion .motion-element,
    .use-motion .brand,
    .use-motion .menu-item,
    .sidebar-inner,
    .use-motion .post-block,
    .use-motion .pagination,
    .use-motion .comments,
    .use-motion .post-header,
    .use-motion .post-body,
    .use-motion .collection-title { opacity: initial; }

    .use-motion .logo,
    .use-motion .site-title,
    .use-motion .site-subtitle {
      opacity: initial;
      top: initial;
    }

    .use-motion {
      .logo-line-before i { left: initial; }
      .logo-line-after i { right: initial; }
    }
  </style>
</noscript>

</head>

<body itemscope itemtype="http://schema.org/WebPage" lang="zh-CN">

  
  
    
  

  <div class="container sidebar-position-left page-post-detail">
    <div class="headband"></div>

    <header id="header" class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-wrapper">
  <div class="site-meta ">
    

    <div class="custom-logo-site-title">
      <a href="/" class="brand" rel="start">
        <span class="logo-line-before"><i></i></span>
        <span class="site-title">Yamdestiny</span>
        <span class="logo-line-after"><i></i></span>
      </a>
    </div>
    
  </div>

  <div class="site-nav-toggle">
    <button aria-label="切换导航栏">
      <span class="btn-bar"></span>
      <span class="btn-bar"></span>
      <span class="btn-bar"></span>
    </button>
  </div>
</div>



<nav class="site-nav">
  
    <ul id="menu" class="menu">
      
        
        
        
          
          <li class="menu-item menu-item-home">
    <a href="/" rel="section">
      <i class="menu-item-icon fa fa-fw fa-home"></i> <br>首页</a>
  </li>
        
        
        
          
          <li class="menu-item menu-item-tags">
    <a href="/tags/" rel="section">
      <i class="menu-item-icon fa fa-fw fa-tags"></i> <br>标签</a>
  </li>
        
        
        
          
          <li class="menu-item menu-item-categories">
    <a href="/categories/" rel="section">
      <i class="menu-item-icon fa fa-fw fa-th"></i> <br>分类</a>
  </li>
        
        
        
          
          <li class="menu-item menu-item-archives">
    <a href="/archives/" rel="section">
      <i class="menu-item-icon fa fa-fw fa-archive"></i> <br>归档</a>
  </li>
        
        
        
          
          <li class="menu-item menu-item-series">
    <a href="/series/" rel="section">
      <i class="menu-item-icon fa fa-fw fa-sitemap"></i> <br>系列</a>
  </li>
        
        
        
          
          <li class="menu-item menu-item-resource">
    <a href="/resource/" rel="section">
      <i class="menu-item-icon fa fa-fw fa-file"></i> <br>资源</a>
  </li>

      
      
    </ul>
  

  
    

  

  
</nav>



  



</div>
    </header>

    
  
  
  
    
      
    
    <a href="https://github.com/YamDestiny" class="github-corner" target="_blank" title="Follow me on GitHub" aria-label="Follow me on GitHub"><svg width="80" height="80" viewbox="0 0 250 250" style="fill:#222; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"/><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"/><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"/></svg>
    
      </a>
    



    <main id="main" class="main">
      <div class="main-inner">
        <div class="content-wrap">
          
          <div id="content" class="content">
            

  <div id="posts" class="posts-expand">
    

  

  
  
  

  

  <article class="post post-type-normal" itemscope itemtype="http://schema.org/Article">
  
  
  
  <div class="post-block">
    <link itemprop="mainEntityOfPage" href="https://yamdestiny.xyz/2017/02/08/GitHub-Hexo-Next-Build-Personal-blog/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="name" content="YamDestiny">
      <meta itemprop="description" content="以铜为镜，可以正衣冠；<br />以史为镜，可以知兴替；<br />以人为镜，可以明得失。">
      <meta itemprop="image" content="https://p3.music.126.net/Am30CzvY9NTxy1xiz5k3GQ==/7729566744520405.jpg?param=170y170">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="Yamdestiny">
    </span>

    
      <header class="post-header">

        
        
          <h1 class="post-title" itemprop="name headline">使用GitHub&Hexo&Next搭建个人博客
              
            
          </h1>
        

        <div class="post-meta">
          <span class="post-time">

            
            
            

            
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              
                <span class="post-meta-item-text">发表于</span>
              

              
                
              

              <time title="创建时间：2017-02-08 13:21:54" itemprop="dateCreated datePublished" datetime="2017-02-08T13:21:54+08:00">2017-02-08</time>
            

            
              

              
                
                <span class="post-meta-divider">|</span>
                

                <span class="post-meta-item-icon">
                  <i class="fa fa-calendar-check-o"></i>
                </span>
                
                  <span class="post-meta-item-text">更新于</span>
                
                <time title="修改时间：2019-04-02 09:23:07" itemprop="dateModified" datetime="2019-04-02T09:23:07+08:00">2019-04-02</time>
              
            
          </span>

          
            <span class="post-category">
            
              <span class="post-meta-divider">|</span>
            
              <span class="post-meta-item-icon">
                <i class="fa fa-folder-o"></i>
              </span>
              
                <span class="post-meta-item-text">分类于</span>
              
              
                <span itemprop="about" itemscope itemtype="http://schema.org/Thing"><a href="/categories/衣带渐宽终不悔，为伊消得人憔悴/" itemprop="url" rel="index"><span itemprop="name">衣带渐宽终不悔，为伊消得人憔悴</span></a></span>

                
                
                  ，
                
              
                <span itemprop="about" itemscope itemtype="http://schema.org/Thing"><a href="/categories/衣带渐宽终不悔，为伊消得人憔悴/Other/" itemprop="url" rel="index"><span itemprop="name">Other</span></a></span>

                
                
                  ，
                
              
                <span itemprop="about" itemscope itemtype="http://schema.org/Thing"><a href="/categories/衣带渐宽终不悔，为伊消得人憔悴/Other/Hexo/" itemprop="url" rel="index"><span itemprop="name">Hexo</span></a></span>

                
                
              
            </span>
          

          
            
              <span class="post-comments-count">
                <span class="post-meta-divider">|</span>
                <span class="post-meta-item-icon">
                  <i class="fa fa-comment-o"></i>
                </span>
                <a href="/2017/02/08/GitHub-Hexo-Next-Build-Personal-blog/#comments" itemprop="discussionUrl">
                
                  <span class="post-comments-count disqus-comment-count" data-disqus-identifier="2017/02/08/GitHub-Hexo-Next-Build-Personal-blog/" itemprop="commentCount"></span>
                </a>
              </span>
            
          

          
          
             <span id="/2017/02/08/GitHub-Hexo-Next-Build-Personal-blog/" class="leancloud_visitors" data-flag-title="使用GitHub&Hexo&Next搭建个人博客">
               <span class="post-meta-divider">|</span>
               <span class="post-meta-item-icon">
                 <i class="fa fa-eye"></i>
               </span>
               
                 <span class="post-meta-item-text">阅读次数：</span>
               
                 <span class="leancloud-visitors-count"></span>
             </span>
          

          

          

          

        </div>
      </header>
    

    
    
    
    <div class="post-body" itemprop="articleBody">

      
      

      
        <p>该Blog始于购买了一个域名，本想租用VPS搭建网站，用来练手。思来想去却找不到一个适合的。后发现GitHub的Pages：</p>
<p><a href="https://github.com/blog/272-github-pages" target="_blank" rel="noopener">You can put anything here you like.</a></p>
<a id="more"></a>
<h2 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h2><p>搭建博客，是为了记录我自己的学习、工作、生活，用于自己查阅、反思、总结，也用于分享与交流。至于为什么要选择这样的方式来搭建博客：<br>面对这样一个又免费，又简单，又轻量，一次配置，就只需要你专心于写作的方式，难道不好吗？</p>
<h2 id="简介"><a href="#简介" class="headerlink" title="简介"></a>简介</h2><h3 id="GitHub"><a href="#GitHub" class="headerlink" title="GitHub"></a>GitHub</h3><p><a href="https://github.com" target="_blank" rel="noopener">GitHub</a>是一个面向开源及私有软件项目的托管平台，Git是其版本控制工具。作为开源代码库以及版本控制系统，GitHub在全球拥有大量的开发者用户，创造、开发、分享了海量的开源代码。足以说其改变了整个软件行业。</p>
<h3 id="Git"><a href="#Git" class="headerlink" title="Git"></a>Git</h3><p><a href="https://git-scm.com" target="_blank" rel="noopener">Git</a>是一个免费、开源的分布式版本控制系统，能够高效的处理任何项目的版本管理。最早是由Linus Torvalds为了管理Linux内核开发而开发的版本控制软件。目前最多的被应用于软件开发领域，由于其无线分支，本地提交等特性，还可适用于更多领域。只要你所做的事经常需要修改，需要后悔药，需要多人协作，也许Git会适合你。</p>
<h3 id="GitHub-Pages"><a href="#GitHub-Pages" class="headerlink" title="GitHub Pages"></a>GitHub Pages</h3><p><a href="https://pages.github.com/" target="_blank" rel="noopener">GitHub Pages</a>是GitHub中的一个服务。GitHub中，项目的Web页面会显示代码库中的所有文件，如果项目比较小，那么文件较少的情况下，还能较为迅速的了解和掌握整个项目。一旦项目大了，文件太多，往往让对该项目有兴趣的人摸不着头脑。故设计之初是为了让项目创建者或其主要成员，编写一个静态页面托管在GitHub服务器上，用于其他人了解项目的架构及适用领域、使用方法等与项目有关的介绍。</p>
<h3 id="Hexo"><a href="#Hexo" class="headerlink" title="Hexo"></a>Hexo</h3><p><a href="https://hexo.io" target="_blank" rel="noopener">Hexo</a>是一个依赖于<a href="https://nodejs.org" target="_blank" rel="noopener">Node.Js</a>技术的快速、简洁且高效的博客框架。Hexo 使用 <a href="https://en.wikipedia.org/wiki/Markdown" target="_blank" rel="noopener">Markdown</a>（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。支持Markdown、一键部署、强大的插件系统和丰富的插件。中文支持良好。</p>
<h3 id="NexT"><a href="#NexT" class="headerlink" title="NexT"></a>NexT</h3><p><a href="https://github.com/iissnan/hexo-theme-next" target="_blank" rel="noopener">NexT</a>是一款Hexo Theme，主旨在于简洁优雅且易于使用。</p>
<h2 id="安装配置"><a href="#安装配置" class="headerlink" title="安装配置"></a>安装配置</h2><h3 id="一、Github-Pages的创建"><a href="#一、Github-Pages的创建" class="headerlink" title="一、Github Pages的创建"></a>一、Github Pages的创建</h3><ol>
<li>注册GitHub账号，进入<a href="https://github.com" target="_blank" rel="noopener">GitHub</a>，右上角点Sign up进入注册页面或在首页填写相应信息点击Sign up for GitHub注册。</li>
<li>注册成功后，进入你的GitHub个人主页<code>https://github.com/yourusername</code>，点击<code>Repositories</code>-&gt; <code>New</code>，创建一个新的代码仓库：<ul>
<li>Repository name: <strong>yourusername.github.io</strong> (必须)</li>
<li>其余选项默认即可</li>
<li>yourusername即是你的账号名字</li>
</ul>
</li>
<li>稍等片刻，即可以通过 yourusername.github.io 访问。可以通过 <a href="https://github.com/yourusername/yourusername.github.io" target="_blank" rel="noopener">https://github.com/yourusername/yourusername.github.io</a> 访问你的项目</li>
</ol>
<h3 id="二、Git的安装"><a href="#二、Git的安装" class="headerlink" title="二、Git的安装"></a>二、Git的安装</h3><blockquote>
<p>Mac自带Git，若不习惯使用命令行，可单独安装客户端。</p>
</blockquote>
<ol>
<li>下载与安装<ul>
<li>通过Git官网下载<a href="https://git-scm.com/download" target="_blank" rel="noopener">Git Download</a></li>
<li>通过GitHub下载<a href="https://desktop.github.com" target="_blank" rel="noopener">GitHub Download</a></li>
<li>Mac可使用<a href="http://brew.sh/" target="_blank" rel="noopener">HomeBrew</a>安装: <code>brew install git</code></li>
<li>Linux (Ubuntu, Debian)：<code>sudo apt-get install git-core</code></li>
<li>Linux (Fedora, Red Hat, CentOS)：<code>sudo yum install git-core</code></li>
</ul>
</li>
</ol>
<h3 id="三、Node-Js的安装"><a href="#三、Node-Js的安装" class="headerlink" title="三、Node.Js的安装"></a>三、Node.Js的安装</h3><ol>
<li><p>下载与安装</p>
<ul>
<li>通过<a href="https://nodejs.org/en/" target="_blank" rel="noopener">Node.js</a>官网下载安装</li>
<li>使用<a href="http://brew.sh/" target="_blank" rel="noopener">HomeBrew</a>安装: <code>brew install node</code></li>
<li><p>通过<a href="https://github.com/creationix/nvm" target="_blank" rel="noopener">nvm (Node Version Manager)</a></p>
<ul>
<li><p>cURL: </p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ curl https://raw.github.com/creationix/nvm/master/install.sh | sh</span><br></pre></td></tr></table></figure>
</li>
<li><p>Wget: </p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ wget -qO- https://raw.github.com/creationix/nvm/master/install.sh | sh</span><br></pre></td></tr></table></figure>
</li>
<li><p>通过cURL或Wget安装nvm后，即可安装Node.Js</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ nvm install stable</span><br></pre></td></tr></table></figure>
</li>
</ul>
</li>
</ul>
</li>
</ol>
<h3 id="四、Hexo的安装与使用"><a href="#四、Hexo的安装与使用" class="headerlink" title="四、Hexo的安装与使用"></a>四、Hexo的安装与使用</h3><blockquote>
<p>Node.js与Git是必要的安装条件，若命令执行过程中报错，通常是因为没有权限，加上<code>sudo</code>即可</p>
</blockquote>
<ol>
<li><p>以上程序安装完成后，即可安装Hexo</p>
 <figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ npm install -g hexo-cli</span><br></pre></td></tr></table></figure>
</li>
<li><p>Hexo初始化</p>
 <figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">$ hexo init &lt;folder&gt;</span><br><span class="line">$ <span class="built_in">cd</span> &lt;folder&gt;</span><br><span class="line">$ npm install</span><br></pre></td></tr></table></figure>
<blockquote>
<p>前两句中<code>&lt;folder&gt;</code>可以先通过mkdir创建文件夹后，<code>cd</code>到新建的文件夹，直接输入<code>hexo init</code>即可初始化当前所在文件夹，从此处开始，往后的命令都建议在该文件夹下执行</p>
</blockquote>
</li>
<li><p>此时打开<code>&lt;folder&gt;</code>中的<code>_config.yml</code>文件，进行简单配置</p>
 <figure class="highlight yml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># Site</span></span><br><span class="line"><span class="attr">title:</span> <span class="string">网站标题</span></span><br><span class="line"><span class="attr">subtitle:</span> <span class="string">网站副标题</span></span><br><span class="line"><span class="attr">description:</span> <span class="string">描述，用于SEO</span></span><br><span class="line"><span class="attr">author:</span> <span class="string">作者</span></span><br><span class="line"><span class="attr">language:</span> <span class="string">网站使用的语言</span></span><br><span class="line"><span class="attr">timezone:</span> <span class="string">时区</span></span><br></pre></td></tr></table></figure>
 <figure class="highlight yml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># URL</span></span><br><span class="line"><span class="comment">## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'</span></span><br><span class="line"><span class="attr">url:</span> <span class="attr">http://yourusername.github.io</span></span><br><span class="line"><span class="attr">root:</span> <span class="string">/</span>	<span class="string">网站根目录</span></span><br><span class="line"><span class="attr">permalink:</span> <span class="string">:year/:month/:day/:title/</span> <span class="string">文章的链接</span></span><br><span class="line"><span class="attr">permalink_defaults:</span>	<span class="string">设置permalink中参数的默认值</span></span><br></pre></td></tr></table></figure>
 <figure class="highlight yml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># Deployment</span></span><br><span class="line"><span class="comment">## Docs: https://hexo.io/docs/deployment.html</span></span><br><span class="line"><span class="attr">deploy:</span></span><br><span class="line"><span class="attr">  type:</span> <span class="string">git</span></span><br><span class="line"><span class="attr">  repo:</span> <span class="attr">https://github.com/yourusername/yourusername.github.io.git</span></span><br><span class="line"><span class="attr">  branch:</span> <span class="string">master</span></span><br></pre></td></tr></table></figure>
</li>
<li><p>生成静态文件</p>
 <figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ hexo generate</span><br></pre></td></tr></table></figure>
<p> 可以简写为</p>
 <figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ hexo g</span><br></pre></td></tr></table></figure>
</li>
<li><p>启动服务器</p>
 <figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ hexo server</span><br></pre></td></tr></table></figure>
<p> 默认情况下，访问网址为：<a href="http://localhost:4000/" target="_blank" rel="noopener">http://localhost:4000/</a>，按<code>ctrl + c</code>终止运行。</p>
</li>
<li>打开浏览器，访问即可看到属于你的博客。</li>
<li><p>部署到GitHub，部署完成后，可访问 <a href="http://yourusername.github.io" target="_blank" rel="noopener">http://yourusername.github.io</a> 查看</p>
<ul>
<li><p>Hexo提供了部署命令，可以直接部署到GitHub。在第三步设置的Deployment即为需要部署到的地方。</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ hexo deploy</span><br></pre></td></tr></table></figure>
<p>可以简写为</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ hexo d</span><br></pre></td></tr></table></figure>
</li>
</ul>
</li>
</ol>
<h3 id="五、Hexo-Theme"><a href="#五、Hexo-Theme" class="headerlink" title="五、Hexo Theme"></a>五、Hexo Theme</h3><p>到目前为止，博客已经创建完成，但我不能满足于初始Theme，于是在GitHub发现NexT这款，简洁大方的Theme。</p>
<ol>
<li>访问<a href="https://github.com/iissnan/hexo-theme-next" target="_blank" rel="noopener">NexT</a>，clone or download 到本地</li>
<li>解压缩或复制到 <code>&lt;blog folder&gt;/&lt;themes folder&gt;</code>，修改文件夹名称<code>hexo-theme-next</code> ==&gt; <code>next</code></li>
<li><p>打开<code>_config.yml</code>，修改theme参数，如下</p>
 <figure class="highlight yml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># Extensions</span></span><br><span class="line"><span class="comment">## Plugins: https://hexo.io/plugins/</span></span><br><span class="line"><span class="comment">## Themes: https://hexo.io/themes/</span></span><br><span class="line"><span class="attr">theme:</span> <span class="string">next</span></span><br></pre></td></tr></table></figure>
</li>
<li><p>验证主题是否生效</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ hexo server</span><br></pre></td></tr></table></figure>
<p>当你看见的界面与之前的不同即说明，主题生效。当前 NexT 默认的 Scheme —— Muse。</p>
</li>
<li><p>截止当前，NexT支持三种Scheme，分别是：</p>
<ul>
<li>Muse - 默认 Scheme，这是 NexT 最初的版本，黑白主调，大量留白</li>
<li>Mist - Muse 的紧凑版本，整洁有序的单栏外观</li>
<li><p>Pisces - 双栏 Scheme，小家碧玉似的清新<br>通过去掉 <code>&lt;blog folder&gt;/&lt;themes folder&gt;/next/_config.yml</code>中<code>#</code>即可</p>
<figure class="highlight yml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># ---------------------------------------------------------------</span></span><br><span class="line"><span class="comment"># Scheme Settings</span></span><br><span class="line"><span class="comment"># ---------------------------------------------------------------</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># Schemes</span></span><br><span class="line"><span class="comment">#scheme: Muse</span></span><br><span class="line"><span class="comment">#scheme: Mist</span></span><br><span class="line"><span class="attr">scheme:</span> <span class="string">Pisces</span></span><br></pre></td></tr></table></figure>
</li>
</ul>
</li>
<li><p>再次部署到GitHub，可访问 <a href="http://yourusername.github.io" target="_blank" rel="noopener">http://yourusername.github.io</a> 查看</p>
  <figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ hexo d</span><br></pre></td></tr></table></figure>
</li>
</ol>
<h3 id="六、域名绑定"><a href="#六、域名绑定" class="headerlink" title="六、域名绑定"></a>六、域名绑定</h3><p>假如你拥有一个属于你自己的域名，也可绑定到<a href="http://yourusername.github.io" target="_blank" rel="noopener">http://yourusername.github.io</a>。</p>
<ol>
<li><p>在你的代码仓库中，<a href="https://github.com/yourusername/yourusername.github.io" target="_blank" rel="noopener">https://github.com/yourusername/yourusername.github.io</a>创建一个没有后缀的文件，命名为<code>CNAME</code>，文件里面只需要写你的域名，比如我的</p>
 <figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">yamdestiny.xyz</span><br></pre></td></tr></table></figure>
<p> 也可在本地创建后提交到GitHub</p>
</li>
<li>选择一个提供域名解析服务的域名商，设置以下解析。</li>
<li>等待解析生效后，就可以通过你自己的域名访问了。</li>
<li>153、154 二选一。先ping一下。</li>
</ol>
<table>
<thead>
<tr>
<th>主机记录</th>
<th>记录类型</th>
<th>记录值</th>
</tr>
</thead>
<tbody>
<tr>
<td>@</td>
<td>A</td>
<td>192.30.252.153</td>
</tr>
<tr>
<td>@</td>
<td>A</td>
<td>192.30.252.154</td>
</tr>
<tr>
<td>www</td>
<td>CNAME</td>
<td>yourusername.github.io.</td>
</tr>
</tbody>
</table>
<h2 id="结语"><a href="#结语" class="headerlink" title="结语"></a>结语</h2><p>这只是我在搭建过程中的一些基本流程，记录下来以备自己查询或让有需要的朋友少走一些弯路。以上是最基本的一套流程，当你搭建完成后，若对目前的功能不太满意，可以参考<a href="https://hexo.io" target="_blank" rel="noopener">Hexo</a>的官网，以及<a href="http://theme-next.iissnan.com/" target="_blank" rel="noopener">Next</a>的官网，来进行一些进阶配置。让你的博客更符合你的心意。后续我也会将我的配置，细数记录到我的博客。也会更新到该文章结尾以便查阅。</p>
<h2 id="参考资料"><a href="#参考资料" class="headerlink" title="参考资料"></a>参考资料</h2><ul>
<li>Hexo官网 <a href="https://hexo.io/zh-cn/" target="_blank" rel="noopener">https://hexo.io/zh-cn/</a></li>
<li>Next使用文档 <a href="http://theme-next.iissnan.com/" target="_blank" rel="noopener">http://theme-next.iissnan.com/</a></li>
</ul>

      
    </div>

    

    
    
    

    

    

    
      <div>
        <ul class="post-copyright">
  <li class="post-copyright-author">
    <strong>本文作者： </strong>YamDestiny</li>
  <li class="post-copyright-link">
    <strong>本文链接：</strong>
    <a href="https://yamdestiny.xyz/2017/02/08/GitHub-Hexo-Next-Build-Personal-blog/" title="使用GitHub&Hexo&Next搭建个人博客">https://yamdestiny.xyz/2017/02/08/GitHub-Hexo-Next-Build-Personal-blog/</a>
  </li>
  <li class="post-copyright-license">
    <strong>版权声明： </strong>本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" rel="external nofollow" target="_blank">CC BY-NC-SA 4.0</a> 许可协议。转载请注明出处！</li>
</ul>

      </div>
    

    <footer class="post-footer">
      
        <div class="post-tags">
          
            <a href="/tags/GitHub/" rel="tag"># GitHub</a>
          
            <a href="/tags/Hexo/" rel="tag"># Hexo</a>
          
            <a href="/tags/Hexo-Theme-NexT/" rel="tag"># Hexo-Theme-NexT</a>
          
            <a href="/tags/Blog/" rel="tag"># Blog</a>
          
        </div>
      

      
      
      

      
        <div class="post-nav">
          <div class="post-nav-next post-nav-item">
            
          </div>

          <span class="post-nav-divider"></span>

          <div class="post-nav-prev post-nav-item">
            
              <a href="/2017/02/10/NexT-Theme-Configuration&Third-party-service-integration/" rel="prev" title="NexT主题配置及第三方服务集成">
                NexT主题配置及第三方服务集成 <i class="fa fa-chevron-right"></i>
              </a>
            
          </div>
        </div>
      

      
      
    </footer>
  </div>
  
  
  
  </article>



    <div class="post-spread">
      
    </div>
  </div>


          </div>
          

  
    <div class="comments" id="comments">
      <div id="disqus_thread">
        <noscript>
          Please enable JavaScript to view the
          <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a>
        </noscript>
      </div>
    </div>

  



        </div>
        
          
  
  <div class="sidebar-toggle">
    <div class="sidebar-toggle-line-wrap">
      <span class="sidebar-toggle-line sidebar-toggle-line-first"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-middle"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-last"></span>
    </div>
  </div>

  <aside id="sidebar" class="sidebar">
    
    <div class="sidebar-inner">

      

      
        <ul class="sidebar-nav motion-element">
          <li class="sidebar-nav-toc sidebar-nav-active" data-target="post-toc-wrap">
            文章目录
          </li>
          <li class="sidebar-nav-overview" data-target="site-overview-wrap">
            站点概览
          </li>
        </ul>
      

      <section class="site-overview-wrap sidebar-panel">
        <div class="site-overview">
          <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
            
              <img class="site-author-image" itemprop="image" src="https://p3.music.126.net/Am30CzvY9NTxy1xiz5k3GQ==/7729566744520405.jpg?param=170y170" alt="YamDestiny">
            
              <p class="site-author-name" itemprop="name">YamDestiny</p>
              <p class="site-description motion-element" itemprop="description">以铜为镜，可以正衣冠；<br>以史为镜，可以知兴替；<br>以人为镜，可以明得失。</p>
          </div>

          
            <nav class="site-state motion-element">
              
                <div class="site-state-item site-state-posts">
                
                  <a href="/archives/">
                
                    <span class="site-state-item-count">49</span>
                    <span class="site-state-item-name">日志</span>
                  </a>
                </div>
              

              
                
                
                <div class="site-state-item site-state-categories">
                  <a href="/categories/index.html">
                    
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                    <span class="site-state-item-count">15</span>
                    <span class="site-state-item-name">分类</span>
                  </a>
                </div>
              

              
                
                
                <div class="site-state-item site-state-tags">
                  <a href="/tags/index.html">
                    
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                      
                    
                    <span class="site-state-item-count">45</span>
                    <span class="site-state-item-name">标签</span>
                  </a>
                </div>
              
            </nav>
          

          

          
            <div class="links-of-author motion-element">
              
                <span class="links-of-author-item">
                  <a href="https://github.com/YamDestiny" target="_blank" title="GitHub"><i class="fa fa-fw fa-github"></i>GitHub</a>
                  
                </span>
              
                <span class="links-of-author-item">
                  <a href="https://steamcommunity.com/id/maple_wqs" target="_blank" title="Steam"><i class="fa fa-fw fa-steam"></i>Steam</a>
                  
                </span>
              
            </div>
          

          
          

          
          

          
            
          
          

        </div>
      </section>

      
      <!--noindex-->
        <section class="post-toc-wrap motion-element sidebar-panel sidebar-panel-active">
          <div class="post-toc">

            
              
            

            
              <div class="post-toc-content"><ol class="nav"><li class="nav-item nav-level-2"><a class="nav-link" href="#前言"><span class="nav-number">1.</span> <span class="nav-text">前言</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#简介"><span class="nav-number">2.</span> <span class="nav-text">简介</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#GitHub"><span class="nav-number">2.1.</span> <span class="nav-text">GitHub</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#Git"><span class="nav-number">2.2.</span> <span class="nav-text">Git</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#GitHub-Pages"><span class="nav-number">2.3.</span> <span class="nav-text">GitHub Pages</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#Hexo"><span class="nav-number">2.4.</span> <span class="nav-text">Hexo</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#NexT"><span class="nav-number">2.5.</span> <span class="nav-text">NexT</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#安装配置"><span class="nav-number">3.</span> <span class="nav-text">安装配置</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#一、Github-Pages的创建"><span class="nav-number">3.1.</span> <span class="nav-text">一、Github Pages的创建</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#二、Git的安装"><span class="nav-number">3.2.</span> <span class="nav-text">二、Git的安装</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#三、Node-Js的安装"><span class="nav-number">3.3.</span> <span class="nav-text">三、Node.Js的安装</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#四、Hexo的安装与使用"><span class="nav-number">3.4.</span> <span class="nav-text">四、Hexo的安装与使用</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#五、Hexo-Theme"><span class="nav-number">3.5.</span> <span class="nav-text">五、Hexo Theme</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#六、域名绑定"><span class="nav-number">3.6.</span> <span class="nav-text">六、域名绑定</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#结语"><span class="nav-number">4.</span> <span class="nav-text">结语</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#参考资料"><span class="nav-number">5.</span> <span class="nav-text">参考资料</span></a></li></ol></div>
            

          </div>
        </section>
      <!--/noindex-->
      

      

    </div>
  </aside>


        
      </div>
    </main>

    <footer id="footer" class="footer">
      <div class="footer-inner">
        <div class="copyright">&copy; 2017 &mdash; <span itemprop="copyrightYear">2019</span>
  <span class="with-love" id="animate">
    <i class="fa fa-user"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">YamDestiny</span>

  

  
</div>




  <div class="powered-by">由 <a class="theme-link" target="_blank" href="https://hexo.io">Hexo</a> 强力驱动 v3.8.0</div>



  <span class="post-meta-divider">|</span>



  <div class="theme-info">主题 &mdash; <a class="theme-link" target="_blank" href="https://github.com/theme-next/hexo-theme-next">NexT.Muse</a> v6.3.0</div>




        








        
      </div>
    </footer>

    
      <div class="back-to-top">
        <i class="fa fa-arrow-up"></i>
        
      </div>
    

    

  </div>

  

<script type="text/javascript">
  if (Object.prototype.toString.call(window.Promise) !== '[object Function]') {
    window.Promise = null;
  }
</script>


























  
  
    <script type="text/javascript" src="/lib/jquery/index.js?v=2.1.3"></script>
  

  
  
    <script type="text/javascript" src="/lib/velocity/velocity.min.js?v=1.2.1"></script>
  

  
  
    <script type="text/javascript" src="/lib/velocity/velocity.ui.min.js?v=1.2.1"></script>
  


  


  <script type="text/javascript" src="/js/src/utils.js?v=6.3.0"></script>

  <script type="text/javascript" src="/js/src/motion.js?v=6.3.0"></script>



  
  

  
  <script type="text/javascript" src="/js/src/scrollspy.js?v=6.3.0"></script>
<script type="text/javascript" src="/js/src/post-details.js?v=6.3.0"></script>



  


  <script type="text/javascript" src="/js/src/bootstrap.js?v=6.3.0"></script>



  

  
    <script id="dsq-count-scr" src="https://yamdestiny.disqus.com/count.js" async></script>
  

  
    <script type="text/javascript">
      var disqus_config = function () {
        this.page.url = 'https://yamdestiny.xyz/2017/02/08/GitHub-Hexo-Next-Build-Personal-blog/';
        this.page.identifier = '2017/02/08/GitHub-Hexo-Next-Build-Personal-blog/';
        this.page.title = '使用GitHub&Hexo&Next搭建个人博客';
        };
      function loadComments () {
        var d = document, s = d.createElement('script');
        s.src = 'https://yamdestiny.disqus.com/embed.js';
        s.setAttribute('data-timestamp', '' + +new Date());
        (d.head || d.body).appendChild(s);
      }
      
        $(function () {
          var offsetTop = $('#comments').offset().top - $(window).height();
          if (offsetTop <= 0) {
            // load directly when there's no a scrollbar
            loadComments();
          } else {
            $(window).on('scroll.disqus_scroll', function () {
              var scrollTop = document.documentElement.scrollTop;
              if (scrollTop >= offsetTop) {
                $(window).off('.disqus_scroll');
                loadComments();
              }
            });
          }
        });
      
    </script>
  





	





  












  





  

  
  <script src="https://cdn1.lncld.net/static/js/av-core-mini-0.6.4.js"></script>
  <script>AV.initialize("pc5KAuPRXg1dU4bG8nC957no-gzGzoHsz", "MSoOlaJ0XYd1YN1SbFBCENg2");</script>
  <script>
    function showTime(Counter) {
      var query = new AV.Query(Counter);
      var entries = [];
      var $visitors = $(".leancloud_visitors");

      $visitors.each(function () {
        entries.push( $(this).attr("id").trim() );
      });

      query.containedIn('url', entries);
      query.find()
        .done(function (results) {
          var COUNT_CONTAINER_REF = '.leancloud-visitors-count';

          if (results.length === 0) {
            $visitors.find(COUNT_CONTAINER_REF).text(0);
            return;
          }

          for (var i = 0; i < results.length; i++) {
            var item = results[i];
            var url = item.get('url');
            var time = item.get('time');
            var element = document.getElementById(url);

            $(element).find(COUNT_CONTAINER_REF).text(time);
          }
          for(var i = 0; i < entries.length; i++) {
            var url = entries[i];
            var element = document.getElementById(url);
            var countSpan = $(element).find(COUNT_CONTAINER_REF);
            if( countSpan.text() == '') {
              countSpan.text(0);
            }
          }
        })
        .fail(function (object, error) {
          console.log("Error: " + error.code + " " + error.message);
        });
    }

    function addCount(Counter) {
      var $visitors = $(".leancloud_visitors");
      var url = $visitors.attr('id').trim();
      var title = $visitors.attr('data-flag-title').trim();
      var query = new AV.Query(Counter);

      query.equalTo("url", url);
      query.find({
        success: function(results) {
          if (results.length > 0) {
            var counter = results[0];
            counter.fetchWhenSave(true);
            counter.increment("time");
            
            counter.save(null, {
              success: function(counter) {
                
                  var $element = $(document.getElementById(url));
                  $element.find('.leancloud-visitors-count').text(counter.get('time'));
                
              },
              error: function(counter, error) {
                console.log('Failed to save Visitor num, with error message: ' + error.message);
              }
            });
          } else {
            
              var newcounter = new Counter();
              /* Set ACL */
              var acl = new AV.ACL();
              acl.setPublicReadAccess(true);
              acl.setPublicWriteAccess(true);
              newcounter.setACL(acl);
              /* End Set ACL */
              newcounter.set("title", title);
              newcounter.set("url", url);
              newcounter.set("time", 1);
              newcounter.save(null, {
                success: function(newcounter) {
                  var $element = $(document.getElementById(url));
                  $element.find('.leancloud-visitors-count').text(newcounter.get('time'));
                },
                error: function(newcounter, error) {
                  console.log('Failed to create');
                }
              });
            
          }
        },
        error: function(error) {
          console.log('Error:' + error.code + " " + error.message);
        }
      });
    }

    $(function() {
      var Counter = AV.Object.extend("Counter");
      if ($('.leancloud_visitors').length == 1) {
        addCount(Counter);
      } else if ($('.post-title-link').length > 1) {
        showTime(Counter);
      }
    });
  </script>



  

  

  
  

  
  

  
    
      <script type="text/x-mathjax-config">
    MathJax.Hub.Config({
      tex2jax: {
        inlineMath: [ ['$','$'], ["\\(","\\)"]  ],
        processEscapes: true,
        skipTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code']
      },
      TeX: {equationNumbers: { autoNumber: "AMS" }}
    });
</script>

<script type="text/x-mathjax-config">
    MathJax.Hub.Queue(function() {
      var all = MathJax.Hub.getAllJax(), i;
        for (i=0; i < all.length; i += 1) {
          all[i].SourceElement().parentNode.className += ' has-jax';
        }
    });
</script>
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/mathjax@2.7.1/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>

    
  


  
  

  

  

  

  

  

</body>
</html>
